<template lang="pug">
  .register
    .content
      p 布勒游戏，实现你价值的快感
      .r-form
        h3 注 册
        .rf-line
          span.label 账号:
          input(id="phone" @blur = 'phonecheck' v-model='phone' @focus = 'onYz' autocomplete="off")
        p.aleary(v-show='aleary')
        .rf-line2
          span {{yzPhone}}
        .rf-line
          span.label 密码:
          input(id="pwd1",type='password' @blur = 'onMima1()' @focus = 'onYz')
        .rf-line2
          span {{mm1}}
        .rf-line
          span.label 确认密码:
          input(id="pwd2",type='password' @blur = 'onMima2()' @focus = 'onYz')
        .rf-line2
          span {{mm2}}
        .rf-line
          span.label 验证码:
          input(id="code")
          span.code-btn(@click="getCode()" id="vertifyCode") 获取验证码
        .rf-line2
          span {{yzm}}
        .registerBtn(@click="registerUser()") 注 册
        .rf-line2
          span {{zc}}
        .loginWay(@click="changePage('/login')") 使用已有帐户登录
  //
</template>
<script>
import $ from "jquery";

export default {
  name: "register",
  data() {
    return {
      phone: "",
      aleary: false,
      flag: false,
      code: "",
      yzPhone: "",
      mm1: "",
      mm2: "",
      yzm: "",
      zc: ""
    };
  },
  mounted() {
    this.$parent.flag1 = false;
    this.$parent.flag2 = false;
  },
  methods: {
    onYz() {
      this.yzPhone = ''
      this.mm1 = ''
      this.mm2 = ''
      this.yzm = ''
      this.zc = ''
    },
    phonecheck() {
      let pattern = /^1[34578]\d{9}$/;
      if (this.phone === "") {
        this.yzPhone = "请填写账号"
      } else if (!pattern.test(this.phone)) {
         this.yzPhone = "手机号不正确"
      } else {
        this.yzPhone = ""
        u.phoneCheck(
          {
            phone: this.phone
          },
          data => {
            if (data.code == 200) {
              this.aleary = true;
              this.yzPhone = "该账户已存在，请直接登录"
            } else {
              this.aleary = false;
            }
          }
        );
      }
    },
    onMima1() {
      this.mm1 = ''
    },
    onMima2() {
      this.mm2 = ''
    },
    // 倒计时
    settime() {
      let count = 60;
      $("#vertifyCode")
        .css("pointer-events", "none")
        .text(count + "秒后重新发送");
      let timer = null;
      timer = setInterval(function() {
        if (count > 0) {
          count = count - 1;
          $("#vertifyCode").text(count + "秒后重新发送");
        } else {
          $("#vertifyCode").css("pointer-events", "");
          $("#vertifyCode").text("获取验证码");
          count = 60;
          clearInterval(timer);
        }
      }, 1000);
    },
    getCode() {
      let pattern = /^1[34578]\d{9}$/;
      let pattern2 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if ($("#phone").val() === "") {
        this.yzPhone = "请填写账号"
      } else if (!pattern.test($("#phone").val())) {
         this.yzPhone = "手机号不正确"
      } else if ($("#pwd1").val() === "" || $("#pwd2").val() === "") {
        this.mm2 = "请填写密码"
      } else if ($("#pwd1").val() !== $("#pwd2").val()) {
        this.mm2 = "两次密码不一致"
      } else if (!pattern2.test($("#pwd1").val())) {
        this.mm2 = "密码格式不正确"
      } else if ($("#code").val() !== this.code) {
        this.yzm = "验证码错误"
      } else {
        this.settime();
        u.verifyCode(
          {
            username: $("#phone").val(),
            type: "register"
            // password: $("#pwd1").val()
          },
          data => {
            if (data && data[0].checkCode) {
              this.code = data[0].checkCode;
              this.flag = true;
            }
          }
        );
      }
    },
    registerUser() {
      if (!this.flag) {
        this.yzm = "请先获取验证码"
      }
      let pattern = /^1[34578]\d{9}$/;
      let pattern2 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
      if ($("#phone").val() === "") {
        this.yzPhone = '请填写账号'
      } else if (!pattern.test($("#phone").val())) {
        this.yzPhone = "手机号不正确"
      } else if ($("#pwd1").val() === "" || $("#pwd2").val() === "") {
        this.yzPhone = "手机号不正确"
      } else if ($("#pwd1").val() !== $("#pwd2").val()) {
        this.mm2 = "两次密码不一致"
      } else if (!pattern2.test($("#pwd1").val())) {
        this.mm2 = "密码格式不正确"
      } else if ($("#code").val() === "") {
        this.yzm = "请填写验证码"
      } else if ($("#code").val() !== this.code) {
        this.yzm = "验证码错误"
      } else {
        u.register(
          {
            username: $("#phone").val(),
            password: $("#pwd1").val(),
            checkCode: $("#code").val()
          },
          data => {
            if (data[0].code == 200) {
              u.setStore("user", {
                name: $("#phone").val(),
                userid: $("#phone").val()
              });
              this.$router.push({ path: "/login" });
            } else {
              this.zc = "注册失败"
            }
          }
        );
      }
    },
    changePage(d) {
      this.$router.push({ path: d });
    }
  },
  components: {}
};
</script>
<style lang="stylus" scoped>
.aleary {
  color: red;
  float: left;
  position: relative;
  top: -25px;
  left: 25px;
}

.register {
  padding: 100px 30px 0 30px;
  width: 100%;
  height: 100vh;
  min-height: 1200px;
  background-image: url('../../static/image/ginsengbg2.png');
  background-size: 100% 100%;

  .content {
    width: 100%;

    > p {
      margin-bottom: 90px;
      font-size: 38px;
      font-weight: bold;
      text-align: center;
      -webkit-text-fill-color: white;
      -webkit-text-stroke: 1px rgba(137, 64, 0, 0.4);
    }

    .r-form {
      width: 100%;

      > h3 {
        margin-bottom: 70px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        -webkit-text-fill-color: white;
        // -webkit-text-stroke: 1px rgba(137, 64, 0, 0.75);
        text-shadow: 0 3px #9e5d1e, 2px 0 #9e5d1e, -2px 0 #9e5d1e, 0 -1px #9e5d1e;
      }

      .rf-line2 {
        height 55px;
        line-height 55px;
        font-size 28px;
        padding-left 30px;
        color white;
        font-weight bold;
        text-shadow: 0 4px #ce4a3e, 3px 0 #ce4a3e, -3px 0 #ce4a3e, 0 -2px #ce4a3e;
      }

      .rf-line {
        position: relative;
        padding: 0 31px 0 36px;
        width: 100%;
        height: 89px;
        line-height: 89px;
        background-image: url('../../static/image/rlinebg.png');
        background-size: 100% 100%;

        span {
          display: inline-block;
        }

        .label {
          width: 165px;
          font-size: 30px;
          font-weight: bold;
          -webkit-text-fill-color: white;
          // -webkit-text-stroke: 1px #3A230A;
          text-shadow: 0 4px #3a230a, 3px 0 #3a230a, -3px 0 #3a230a, 0 -2px #3a230a;
        }

        input {
          width: 309px;
          font-size: 30px;
          font-weight: bold;
          background: none;
          outline: none;
          border: 0;
          -webkit-text-fill-color: white;
          text-shadow: 0 4px #9e5d1e, 3px 0 #9e5d1e, -3px 0 #9e5d1e, 0 -2px #9e5d1e;
        }

        .code-btn {
          position: absolute;
          right: 31px;
          font-size: 26px;
          font-family: MicrosoftYaHei-Bold;
          font-weight: bold;
          -webkit-text-fill-color: white;
          -webkit-text-stroke: 1px rgba(137, 64, 0, 0.56);
        }
      }

      .registerBtn {
        margin-top: 130px;
        width: 100%;
        height: 90px;
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        font-family: MicrosoftYaHei-Bold;
        font-weight: bold;
        background-image: url('../../static/image/registerBtn.png');
        background-size: 100% 100%;
        -webkit-text-fill-color: white;
        // -webkit-text-stroke: 1px rgba(137, 64, 0, 0.75);
        text-shadow: 0 2.5px #a65d08, 2px 0 #a65d08, -2px 0 #a65d08, 0 -2px #a65d08;
      }

      .loginWay {
        // margin-top: 50px;
        width: 100%;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        -webkit-text-fill-color: white;
        // -webkit-text-stroke: 1px rgba(137, 64, 0, 0.84);
        text-shadow: 0 3px #9e5d1e, 2px 0 #9e5d1e, -2px 0 #9e5d1e, 0 -1px #9e5d1e;
      }
    }
  }
}
</style>
